<template>
  <div class="cmt-wrapper">
    <h4 class="cmt-title">评论</h4>
    <div class="cmt-input">
      <el-input
        type="textarea"
        :rows="2"
        ref="textarea"
        placeholder="写点东西吧。。。"
        v-model="textarea"
        resize="none"
        style="min-height: 33px"
      >
      </el-input>
    </div>
    <el-row class="cmt-input-ctrls" type="flex" justify="space-between">
      <div class="cmt-pics">
        <!-- :data="{ files: this.$route.params.id }" -->
        <el-upload
          :action="`${$axios.defaults.baseURL}/upload`"
          list-type="picture-card"
          name="files"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="updada"
          ref="imgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <div>
        <el-button type="primary" @click="sendcomment">提交</el-button>
      </div>
    </el-row>
    <div class="cmt-list">
      <!-- <CommentBlackItem
        @sendId="getid"
        v-if="commentdata.data"
        :data="commentdata"
      /> -->
      <Commentuser
        v-if="commentdata.data"
        :data="commentdata"
        @sendId="getid"
      />
    </div>
    <el-row type="flex" justify="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commentdata.total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: '',
      ertextarea: '',
      dialogImageUrl: '',
      dialogVisible: false,
      pics: [],
      id: '',
      currentPage: 1,
      pagesize: 10,
      commentdata: {},
      postId: '' // 5107
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    console.log(this.$route.params.id);
    this.initcomment();
  },
  methods: {
    // 获取id
    getid(data) {
      console.log(data);
      this.postId = data.id;
      this.ertextarea = data.str;
      // console.log(this.postId);
      this.sendcomment();
      // this.$refs.textarea.$el.placeholder = '@回复了';
      // console.log(this.$refs.textarea.$el.placeholder);
    },
    // 请求评论数据
    initcomment() {
      this.$axios({
        url: '/hotels/comments',
        params: {
          // hotel: this.$route.params.id
          _sort: 'created_at:desc',
          _start: (this.currentPage - 1) * this.pagesize,
          _limit: this.pagesize
        }
      }).then(res => {
        this.commentdata = res.data;
        console.log(this.commentdata);
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.initcomment();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.initcomment();
    },
    // 发送评论
    sendcomment() {
      // console.log(this.textarea);
      // console.log(this.pics);
      // console.log(this.$store.state);
      if (this.postId === '') {
        this.sendcommentqq({
          hotel: this.$route.params.id,
          content: this.textarea,
          pics: this.pics
        });
      } else {
        // console.log(123);
        this.sendcommentqq({
          hotel: this.$route.params.id,
          content: this.ertextarea,
          pics: this.pics,
          follow: this.postId
        });
      }
    },
    // 评论请求
    sendcommentqq(obj) {
      this.$axios({
        url: '/comments',
        method: 'post',
        // Authorization: 'Bearer ' + this.$store.state.user.userstate.token,
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + this.$store.state.user.userstate.token
        },
        data: obj
      }).then(res => {
        console.log(res);
        this.$alert('发布成功', '提示', {
          confirmButtonText: '确定',
          type: 'success',
          callback: () => {
            this.postId = '';
            this.textarea = '';
            // this.$refs.imgList
            // console.log(this.$refs.imgList);
            this.$refs.imgList.clearFiles();
            this.initcomment();
          }
        });
      });
    },
    // 发送图片成功的钩子
    updada(response, file, fileList) {
      // console.log(response);
      // console.log(file);
      // console.log(fileList);
      response[0].url = this.$axios.defaults.baseURL + response[0].url;
      // response[0].hash = this.$axios.defaults.baseURL + response[0].hash;
      this.pics.push(response[0]);
      // console.log(this.pics);
    },
    handleRemove(file, fileList) {
      console.log(file);
      // console.log(fileList);
      this.pics.splice(this.pics.findIndex(item => {
        return item.name === file.name;
      }), 1);
      console.log(this.pics);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.cmt-wrapper {
  // width: 60%;
  h4 {
    margin-bottom: 10px;
  }
  .cmt-input {
    margin-bottom: 10px;
  }
  .cmt-input-ctrls {
    margin-bottom: 30px;
    .cmt-pics {
      /deep/.el-upload--picture-card {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        // object-fit: cover;
      }
    }
  }
}
</style>
